<template>
    <div>
        <!-- 轮播图区 -->
        <el-carousel height="300px" style="width: 100%;" :interval="4000" arrow="hover">
            <el-carousel-item v-for="(item, index) in carouselData" :key="index">
                <div class="carousel-item">
                    <el-image fit="contain" style="width:100%;height:100%" :src="item.img" alt="轮播图" />
                    <div class="carousel-caption">{{ item.title }}</div>
                </div>
            </el-carousel-item>
        </el-carousel>

        <el-container style="padding: 20px; background-color: #f0f2f5;">

            <!-- 政策区域 -->
            <div class="section">
                <h2 class="section-title">最新政策</h2>
                <el-scrollbar style="height: 400px;">
                    <el-row :gutter="20">
                        <el-col v-for="(policy, idx) in policies" :key="idx">
                            <el-card class="policy-card" shadow="hover">
                                <div class="policy-title">{{ policy.title }}</div>
                                <div class="policy-date">发布日期：{{ policy.date }}</div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-scrollbar>
            </div>

            <!-- 新闻区域 -->
            <div class="section">
                <h2 class="section-title">乡村新闻</h2>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-scrollbar style="height: 400px;">
                            <el-row :gutter="20">
                                <el-col v-for="(news, id) in newsList" :key="id" :span="12"
                                    style="margin-bottom: 20px;">
                                    <el-card class="news-card" shadow="always">
                                        <div class="news-title">{{ news.title }}</div>
                                        <div class="news-summary">{{ news.summary }}</div>
                                        <div class="news-date">{{ news.date }}</div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-scrollbar>
                    </el-col>
                </el-row>
            </div>
        </el-container>
    </div>
</template>

<script>
import swap1 from '../assets/index/swap1.png';
import swap2 from '../assets/index/swap2.png';
import swap3 from '../assets/index/swap3.png';
export default {
    name: 'DigitalRuralHome',
    data() {
        return {
            // 轮播图数据
            carouselData: [
                { img: swap1, title: '智慧农业助力乡村振兴' },
                { img: swap2, title: '乡村治理数字化改革' },
                { img: swap3, title: '生态文明与绿色发展' }
            ],
            policies: [
                { title: '推进乡村数字基础设施建设', date: '2025-04-15' },
                { title: '鼓励智慧农业技术应用', date: '2025-04-10' },
                { title: '加强农村电商支持政策', date: '2025-04-05' },
                { title: '推进乡村数字基础设施建设', date: '2025-04-15' },
                { title: '鼓励智慧农业技术应用', date: '2025-04-10' },
            ],
            newsList: [
                {
                    title: '数字乡村示范区建设进展',
                    summary: '我市数字乡村示范区建设稳步推进，已完成网络基础设施升级。',
                    date: '2025-04-28'
                },
                {
                    title: '农村电商助农增收',
                    summary: '本地电商平台联合村集体合作社，实现农产品线上销售突破。',
                    date: '2025-04-26'
                },
                {
                    title: '乡村文化活动丰富多彩',
                    summary: '各村纷纷举办文化节、农民运动会等活动，丰富群众业余生活。',
                    date: '2025-04-22'
                },
                {
                    title: '智能农业装备推广',
                    summary: '新型智能化农机具投入使用，提高了耕作效率和精准度。',
                    date: '2025-04-20'
                },
                {
                    title: '乡村治理系统上线',
                    summary: '数字化乡村治理系统在部分试点村庄正式启用。',
                    date: '2025-04-18'
                },
                {
                    title: '农产品溯源平台建设加快',
                    summary: '实现农产品产地、加工、销售全过程可追溯。',
                    date: '2025-04-17'
                }
            ]
        }
    }
}
</script>

<style scoped>
.carousel-item {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 18px;
}

.section {
    margin-top: 40px;
}

.section-title {
    font-size: 22px;
    color: #2c3e50;
    margin-bottom: 20px;
    border-left: 5px solid #67c23a;
    padding-left: 10px;
}

.policy-card {
    background: #ffffff;
    border-left: 5px solid #67c23a;
}

.policy-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.policy-date {
    font-size: 13px;
    color: #999;
}

.news-card {
    background: #ffffff;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-title {
    font-size: 16px;
    font-weight: 600;
    color: #409EFF;
    margin-bottom: 6px;
}

.news-summary {
    font-size: 14px;
    color: #606266;
    margin-bottom: 10px;
}

.news-date {
    font-size: 12px;
    color: #999;
    text-align: right;
}
</style>